<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .wrapper{
           position: absolute;
           left:50%;
           top:50%;
           transform: translate(-50%,-50%);
       }
       .table{
           width:100px;
           height:100px;
           border-radius: 50%;
           border:50px solid #333;
           background: url("./img/troye.jpg");
           background-size:cover; 
           
       }
       .play{
            animation: move 10s linear infinite;
       }
       button{
           border-style: none;
           position: absolute;
           left:600px;
           top:60px;
           width:80px;
           height:40px;
           font-size:14px;
           color:#fff;
           background-color:#5bc0de;
           border-radius: 20%;
       }
       .pin{
           position: absolute;
           top:-50px;
           left:50%;
           transform: translateX(-50%);
           width:10px;
           height:100px;
           background: #ccc;
           border-bottom-right-radius:100%;
           border-bottom-left-radius: 100%;
           transform-origin: top; 
           transform: rotateZ(-60deg);
           transition: all 1s;
       }
       @keyframes move{
           0%{
               transform: rotate(0deg);
           }
           100%{
            transform: rotate(360deg);
           }
       }
       .active{
        transform: rotateZ(-30deg);
       }
       .vd{
           position: absolute;
           top: 400px;
           left: 200px;
       }
    </style>
</head>
<body>
    <button id="btn">play/pause</button>
    <div class="wrapper">
        <div class="table" id="box"></div>
        <div class="pin"></div>
    </div>
    <audio id="vd" class="vd">
        <source src="./img/For him. - Troye Sivan_Allday.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
      </audio>
    
    <script>
        var oTable = document.getElementsByClassName("table")[0]
        var oPin = document.getElementsByClassName("pin")[0]
        // var music = document.getElementById("vd")
        var flag = true;
        btn.onclick = function(){
            if(flag){
                flag = false
                oTable.className = "table play"
                box.style.animationPlayState = "running"
                oPin.className = "pin active"
                vd.play()
            }else{
                flag = true
                oTable.className = "table"
                oPin.className = "pin"
                box.style.animationPlayState = "paused"
                vd.pause()
            }
            
        }
        
   

    </script>
</body>
</html>